<template>
  <div class="top">
    <div class="content-top">
      <div class="logotop">
        <img class="logotop" src="../../assets/header/logotop.png"/>
      </div>
      <div class="login">
        <el-popover
          placement="bottom"
          width="193"
          trigger="hover">
          <p class="message">扫描二维码注册安装</p>
          <img src="../../assets/header/pop_registerqr.png" style="margin-top: 5%"/>
          <el-button class="appBtn" type="text" slot="reference">园区APP</el-button>
        </el-popover>

        <a href="#" style="text-decoration: none; font-size: 12px; margin-right: 10px; margin-left: 30px;" v-bind:class="{changecolor: changecolor}" v-on:mouseover="changecolor=!changecolor" v-on:mouseleave="changecolor=!changecolor" >登录</a>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'top',
    data: function(){
      return {

        changecolor: false
      }
    }
  }


</script>

<style lang="scss" scoped>
  .top {
    background: url('../../assets/header/logo.png');
    width: 100%;
    margin: 0 auto;
    height: 90px;
  }
  .content-top {
    width: 1004px;
    height: 98px;
    margin: 0 auto;
  }
  .logotop {
    float: left;
    padding-top: 10px;
    width: 147px;
    height: 52px;
  }
  .login {
    float: right;
    padding-top: 25px;
  }
  .appBtn {
    border: none;
    background: none;
    font-family: "Microsoft Yahei", Arial, "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", SimSun, STHeiti;
    font-size: 12px;
    color: black;
  }
  .message {
    position: absolute;
    font-size: 11px;
    margin-top: 25px;
    margin-left: 45px;
    z-index: 11;
  }

  .changecolor{
    color:rgb(80,124,192);
  }


  a{
    color: black;
  }
</style>
